{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">

    <script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>

    <script src="{% static 'plugins/vue1/vue.js' %}"></script>

    <script src="{% static 'enjoyhint/js/enjoyhint.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'enjoyhint/css/enjoyhint.css' %}">
    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
    </style>
{% endblock header_tail %}

{% block section_content %}
    <div class="row" id="nav-app">
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-red">
                <div class="inner">
                    <p>领取任务</p>
                    <h3 id="acceptTask">{{ source_count }}</h3>
                </div>
                <div class="icon">
                    <!--<i class="glyphicon glyphicon-star-empty"></i>-->
                    <i class="fa fa-bell" style="margin-top: 15px;"></i>
                </div>
                <a href="{% url 'task:accept' %}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <p>我的任务</p>
                    <h3 id="myTask">{{ task_count }}</h3>
                </div>
                <div class="icon" style="margin-top: 15px;">
                    <i class="fa fa-sitemap"></i>
                </div>
                <a href="{% url 'task:mine' %}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-green">
                <div class="inner">
                    <p>我的配置</p>
                    <h3 id="myConfig">{{ config_count }}<sup style="font-size: 20px"></sup></h3>
                </div>
                <div class="icon">
                    <i class="fa fa-list" style="margin-top: 15px;"></i>
                </div>
                <a href="{% url 'task:my_config' %}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <p>我的收入</p>
                    <h3 id="myIncome">{{ my_income }}</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-diamond" style="margin-top: 15px;"></i>
                </div>
                <a href="{% url 'task:my_income' %}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <div>
        <div class="box-header with-border">
            <h3 class="box-title">{{ model_verbose_name }}</h3>
        </div>
        <!-- form start -->
        <div class="box box-primary">
        <!-- 展示搜索出来的任务 -->
            <div id="main">
                <div id="showMessage" v-show="message"> [[ message ]]</div>
                <div class="box-body" v-show="showMain">
                    <form id="model_form" role="form"
                          method="post">{% csrf_token %}
                        <div class="group">
                            <table id="task_each_table" border="1" class="table table-bordered table-hover table-striped">
                                <thead>
                                <tr>
                                    <th v-for="head in tableData.headers">
                                        <span style="float: left">
                                            [[ head.name ]]
                                        </span>
                                        {% if field.rank %}
                                            <a href="?[[ head.rank ]]=[[ head.rank_tag ]][[ page_args ]]"
                                               style="float: right">
                                                {% if field.rank_tag == 0 %}
                                                    <i class="fa fa-fw fa-sort"></i>
                                                {% elif field.rank_tag == 1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-asc"></i>
                                                {% elif field.rank_tag == -1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-desc"></i>
                                                {% endif %}
                                            </a>
                                        {% endif %}
                                    </th>
                                    <th>
                                        <span style="float: left">
                                            操作
                                        </span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                    <template v-for="task in tableData.tasks">
                                        <tr>
                                            <template v-for="head in tableData.headers">
                                                <template v-if="head.key == 'allocation_flag'|| head.key == 'finish_flag' || head.key == 'ctime' || head.key == 'deadline_flag' || head.key == 'status'">
                                                    <td v-if="head.key == 'status'">[[ parseStatus(task[head.key]) ]]</td>
                                                    <td v-else>[[ parseTime(task[head.key]) ]]</td>
                                                </template>
                                                <template v-else>
                                                    <td v-if="head.key == 'site_url'"><a href="[[ task[head.key] ]]" target="_Blank">[[ task[head.key] ]]</a></td>
                                                    <td v-else>[[ task[head.key] ]]</td>
{#                                                    <td>[[ task[head.key] ]]</td>#}
                                                </template>
                                            </template>
                                            <td class="btn-group">
                                                <button v-if="task.status == 1" type="button" value="[[ task.id ]]" class="btn btn-info btn-xs" onclick="operation([[task.id]])">操作</button>
                                                <button id="tint-info" type="button" value="[[ task.id ]]" class="btn btn-info btn-xs" onclick="detailOneTask([[task.id]])">详情</button>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                            <p class="" id="paginator">
                                <a class="btn btn-default btn-xs" v-if="paginator.current > 1" onclick="toPage('first',paginator.limit)">首页</a>
                                <a class="btn btn-default btn-xs" v-else disabled="true">首页</a>
                                <a class="btn btn-default btn-xs" v-if="paginator.current > 1" onclick="toPage('prev',paginator.limit)">上一页</a>
                                Page [[ paginator.current ]] of [[ paginator.last ]]
                                <a class="btn btn-default btn-xs" v-if="paginator.current < paginator.last" onclick="toPage('next',paginator.limit)">下一页</a>
                                <a class="btn btn-default btn-xs" v-if="paginator.current < paginator.last" onclick="toPage('last',paginator.limit)">尾页</a>
                                <a class="btn btn-default btn-xs" v-else disabled="true">尾页</a>
                                <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px" onkeyup="toPage('judge', paginator.limit)">
                                <a class="btn btn-default btn-xs"  onclick="toPage('judge', paginator.limit)">跳页</a>
                            </p>
                        </div>
                        <!-- /.box-footer -->
                        <div class="box-footer">
                            <button class="btn btn-primary no-display" id="submit_button">确认</button>
                            <button type="button" class="btn btn-primary" id="save_submit" name="_save"
                                    style="display: none">sure
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="userList" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:30%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body" style="overflow:auto">
                    <label>请选择要分配给谁（可以多选）：</label>
                    <!--
                    {/% for user in configUsers %}
                        <br><input name="user" type="radio" value="{/{ user.id }}">
                        <label>{/{ user.user.username }}</label>
                    {/% endfor %}
                    -->
                    <table id="user_each_table" border="1" class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th class="action-checkbox">
                                    <input type="checkbox" name="uth_checkbox" onclick="_checkAll(this)">
                                </th>
                                <th>
                                    <span style="float: left">
                                        用户名
                                    </span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in configUsers %}
                                <br>
                                <tr>
                                    <td class="action-checkbox">
                                        <input type="checkbox" name="utd_checkbox" value="{{ user.user.id }}" onclick="_checkOne(this)">
                                    </td>
                                    <td>{{ user.user.username }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" id="confirm_close" class="btn btn-default"
                            data-dismiss="modal" onclick="confirmClose()">确认
                    </button>
                    <button type="button" id="cancel_close" class="btn btn-default"
                            data-dismiss="modal" onclick="cancelClose()">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--弹出提示消息-->
    <div class="modal fade" id="taskMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    请至少选择一条任务！
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button"class="btn btn-default"
                            data-dismiss="modal">确认
                    </button>
                </div>
            </div>
        </div>
    </div>


    <!--弹出没有选择用户的提示消息-->
    <div class="modal fade" id="taskMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    请至少选择一个状态！
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button"class="btn btn-default"
                            data-dismiss="modal">确认
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--弹出没有选择用户的提示消息-->
    <div class="modal fade" id="retrieveMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    确定要回收吗?
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button"class="btn btn-default" onclick="retrieve()"
                            data-dismiss="modal">确认
                    </button>
                    <button type="button"class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--弹出操作提示消息-->
    <div class="modal fade" id="operationMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #307095;font-weight: bold;">
                    <label>请选择反馈原因，无需反馈则直接点击领取</label>
                </div>

                <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    <table id="operation_each_table" border="1" class="table table-bordered table-hover table-striped">
                        <tbody>
                            <tr>
                                <td class="action-checkbox">
                                    <input type="radio" name="utd_checkbox" value="网站失效" onclick="_checkOne(this)">
                                </td>
                                <td>网站失效，无法打开</td>
                            </tr>
                            <tr>
                                <td class="action-checkbox">
                                    <input type="radio" name="utd_checkbox" value="网站难度较大" onclick="_checkOne(this)">
                                </td>
                                <td>网站难度较大</td>
                            </tr>
                            <tr>
                                <td class="action-checkbox">
                                    <input type="radio" name="utd_checkbox" value="领取" onclick="_checkOne(this)">
                                </td>
                                <td>确认领取</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button"class="btn btn-default" onclick="confirmClose()"
                            data-dismiss="modal">确认
                    </button>
{#                     <button type="button"class="btn btn-default" onclick="op_appect()"#}
{#                            data-dismiss="modal">领取#}
{#                    </button>#}
                    <button type="button"class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--弹出没有选择用户的提示消息-->
    <div class="modal fade" id="passMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    确定要判定为合格状态吗？
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button"class="btn btn-default" onclick="pass()"
                            data-dismiss="modal">确认
                    </button>
                    <button type="button"class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--弹出没有选择用户的提示消息-->
    <div class="modal fade" id="rejectMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    确定要判定为不合格状态吗?
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button"class="btn btn-default" onclick="reject()"
                            data-dismiss="modal">确认
                    </button>
                    <button type="button"class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--弹出没有选择用户的提示消息-->
    <div class="modal fade" id="revokeMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    确定要修改为不合格状态吗?
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button"class="btn btn-default" onclick="revoke()"
                            data-dismiss="modal">确认
                    </button>
                    <button type="button"class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--弹出没有选择用户的提示消息-->
    <div class="modal fade" id="checkMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    确定要修改为已合格状态吗?
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button"class="btn btn-default" onclick="check()"
                            data-dismiss="modal">确认
                    </button>
                    <button type="button"class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <input id="taskIds" value="" style="display:none;"></input>

    <script>
        function setCookie(key,value,t)
        {
            var oDate=new Date();
            oDate.setDate(oDate.getDate()+t);
            document.cookie=key+"="+value+"; expires="+oDate.toDateString();
        }
        function getCookie(key){
            var arr1=document.cookie.split("; ");
            for(var i=0;i<arr1.length;i++){
                var arr2=arr1[i].split("=");
                if(arr2[0]==key){
                    return decodeURI(arr2[1]);
                }
            }
        }
        //封装一个移除cookie的函数
        function removeCookie(key){
            setCookie(key,"",-1);//把cookie设置为过期
        }
        var $qqq = jQuery.noConflict();
        function _checkOne(obj){
            if ($qqq("input[name='uth_checkbox']").is(":checked")){
                $qqq("input[name='uth_checkbox']").prop("checked", false)
            }else{
                var unChecked = 0;
                $qqq("input[name='utd_checkbox']").each(
                    function(){
                        if ($qqq(this).is(":checked")){

                        }else{
                            unChecked += 1
                        }
                    }
                );
                if (unChecked === 0){
                    $qqq("input[name='uth_checkbox']").prop("checked", true)
                }
            }
        }


        function operation(tids) {
            if (tids){
                tids = tids + "";
                $qqq("#taskIds").val(tids);
                $("#operationMessage").modal();
            }else{
                return false
            }
        }

        function op_appect(tids){
            if (!tids){
                tids = $qqq("#taskIds").val()
            }
            if (tids.length === 0){
                $qqq("#taskMessage").modal();
                return false
            }else{
                accept(tids)
            }
            $qqq("#taskIds").val("");
        }

        function confirmClose(){
            var tids = $qqq("#taskIds").val();
            var cvalue = '';
            $qqq("input[name='utd_checkbox']:checked").each(
                function(){
                    cvalue = $qqq(this).val();
                }
            );
            if (tids.length === 0){
                $qqq("#taskMessage").modal();
                return false;
            }
            if (cvalue === ''){
                $qqq("#taskMessage").modal();
                return false
            }
            else if (cvalue === '领取'){
                accept(tids,cvalue);
            }
            else {
                 opera(tids,cvalue)
            }

            {#uids = userIds.join();#}

            {#allocate(tids, uids);#}
            _clearChecked();
        }

        function _clearChecked(){
            if ($qqq("input[name='uth_checkbox']").is(":checked")){
                $qqq("input[name='uth_checkbox']").prop("checked", false)
            }
            $qqq("input[name='utd_checkbox']:checked").each(
                function(){
                    $qqq(this).prop("checked", false);
                }
            );
        }

        function opera(tids,cvalue){
            if (!tids){
                var _tids = [];
                $qqq("input[name='td_checkbox']:checked").each(
                    function(){
                        _tids.push($qqq(this).val())
                    }
                );
                tids = _tids.join();
            }
            if (tids.length === 0){
                return false
            }else{
                $qqq.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        tids: tids,
                        cvalue : cvalue

                    }
                });
                $qqq.post(
                    "{% url 'task:accept' %}",
                    function(response){
                        alert(response.message);
                        mainVue.message = response.message;
                        toPage('current')
                    }
                )
            }
        }


        function acceptOneTask(tids){
            accept(tids)
        }
        function accept(tids,cvalue){
            if (!tids){
                var _tids = [];
                $qqq("input[name='td_checkbox']:checked").each(
                    function(){
                        _tids.push($qqq(this).val())
                    }
                );
                tids = _tids.join();
            }
            if (tids.length === 0){
                return false
            }else{
                $qqq.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        tids: tids,
                        cvalue : cvalue
                    }
                });
                $qqq.post(
                    "{% url 'task:accept' %}",
                    function(response){
                        alert(response.message);
                        mainVue.message = response.message;
                        toPage('current')
                    }
                )
            }
        }
        function detailOneTask(tid){
           var url = "{% url 'task:detail' %}" + "?id=" + tid + "&type=task";
           window.location.href = url;
        }

        Vue.config.delimiters = ["[[", "]]"];


        function toPage(page){
            if (mainVue.paginator){
                if (page == 'current'){
                    page = mainVue.paginator.current
                }
                if (page == 'next'){
                    page = mainVue.paginator.current + 1
                }
                if (page == 'prev'){
                    page = mainVue.paginator.current - 1
                }
                if (page == 'first'){
                    page = 1
                }
                if (page == 'last'){
                    page = mainVue.paginator.last
                }
                if (page == 'judge'){
                    page = $qqq("#page-judge").val();
                }
                if (page < 1) {
                    page = 1;
                }
                if (page > mainVue.paginator.last){
                    page = mainVue.paginator.last;
                }
                if (page < mainVue.paginator.first){
                    page = mainVue.paginator.first;
                }
            }else{
                page = 1;
            }
            mainVue.page = page;
            render(mainVue);
        }

        function render(obj){
            var searchForm = obj.searchForm + '&page=' + obj.page;
            $qqq.get(
                "{% url 'task:unallocated_tasks' %}",
                searchForm,
                function(response){
                    if (response){
                        obj.showMain = true;
                        obj.tableData = response.tableData;
                        obj.paginator = response.paginator;
                        obj.message = response.message;
                        console.log(obj.paginator);
                    }else{
                        obj.showMain = false;
                    }
                }
            )
        }
        var mainVue = new Vue({
            el: "#main",
            data: {
                page: 1,
                status: 1,
                limit: {{ limit }},
                searchForm: "",
                checkedAll: false,
                showMain: false,
                tableData: {},
                paginator: {},
                message: ""
            },
            methods: {
                parseTime :function (timeStamp){
                    if (!timeStamp){
                        return ""
                    }
                    var newDate = new Date();
                    newDate.setTime(timeStamp * 1000);
                    return newDate.toLocaleDateString()
                },
                parseStatus: function(status){
                    var statuses = {
                        1:{
                            name:"待分配"
                        },
                        2:{
                            name:"待处理"
                        },
                        3:{
                            name:"处理中"
                        },
                        4:{
                            name:"待审核"
                        },
                        5:{
                            name:"已合格"
                        },
                        6:{
                            name:"不合格"
                        },
                        0:{
                            name:"已回收"
                        }
                    };
                    return statuses[status]["name"]
                },
                //searchTasks: searchTasks,
                getTasks: function(){
                    var searchForm = 'page=' + this.page + '&limit=' + this.limit + '&status=' + this.status;
                    $qqq.get(
                        "{% url 'task:unallocated_tasks' %}",
                        searchForm,
                        function(response){
                            if (response){
                                this.showMain = true;
                                this.tableData = response.tableData;
                                this.paginator = response.paginator;
                                this.message = response.message;
                                console.log(this.paginator);
                            }else{
                                this.showMain = false;
                            }
                        }
                    )
                }
            },
            watch: {
{#                page: function(){#}
{#                    render(this);#}
{#                }#}
            }
        });
        function searchTasks(){
            mainVue.searchForm = "limit=20";
            $qqq.get(
                "{% url 'task:unallocated_tasks' %}",
                mainVue.searchForm,
                function(response){
                    if (response){
                        mainVue.limit = response.limit;
                        mainVue.showMain = true;
                        mainVue.limits = response.limits;
                        mainVue.tableData = response.tableData;
                        mainVue.paginator = response.paginator;
                        mainVue.message = response.message;
                    }else{
                        mainVue.showMain = false;
                    }
                }
            )
        }
        searchTasks();
        function changeColor(id, color){
            //$qqq(id).parent().parent().parent().children().children().children().find("li[color='green']");
            $qqq(id).parent().parent().addClass("active");
            $qqq(id).children().css("color", color);
        }
        //$qqq("#taskManager").addClass("active");
        changeColor("#accept_task", "#00FF7F");
        $qqq('#nav_accept').addClass("active");
    </script>
{% if not new_tasks %}
    <script src="{% static 'enjoyhint/js/hint-sequence-1.js' %}"></script>
    <script>
        if(getCookie('NewbieSkip')!='1') {
            // 点击跳过
            var $enjoy = jQuery.noConflict();
            $enjoy('.enjoyhint_skip_btn').click(function () {
                setCookie('NewbieSkip', '1', 365);
                alert('您可以前往我的任务/项目--奖励任务模块，查看完成新手任务哦~');
            });
            //页面停留时间
            var start, stop, step = 5;

            function dt() {
                var date = new Date();
                return date.getTime();
            }

            window.onload = function () {
                start = dt();
            };
            window.onbeforeunload = function () {
                stop = dt();
                tp = stop - start;
                $.post({
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        step: step,
                        tp: tp,
                        last_event: '',
                        next_event: '',
                        behavior_weight: '新手引导'
                    },
                    url: "{% url 'zhongbao_admin:behavior_record' %}"
                });
                start = stop;
            };
        };
    </script>
{% endif %}
{% endblock section_content %}
